<template>
  <!-- 使用better-scroll上拉加载必须只有一个子元素 chuzu就是子元素 而且父元素必要要有固定的宽高 -->
  <!-- 谁要用上拉加载给谁加 -->
  <div class="big_wrap">
    <div class="chuzu">
      <div class="wrap" v-for="item in roomData" :key="item._id">
        <van-card :desc="item.release_time" :title="item.release_person">
          <template #thumb>
            <img src="../../assets/img/头像.png" alt />
          </template>
          <template #num>有房转租</template>
          <template #price>
            <span>￥</span>
            <i>{{ item.price }}</i>
          </template>
        </van-card>
        <div class="div1">
          <div class="div2">
            <span>{{ item.roomform }}</span>
            <span>{{ item.type }}</span>
            <span>{{ item.ways }}</span>
          </div>
          <p>{{ item.describe }}</p>
          <div class="div-img-father">
            <div class="div-img">
              <img
                :src="item1"
                :key="index"
                v-lazy="item1"
                alt
                v-for="(item1, index) in item.imgUrl"
              />
            </div>
          </div>
          <p class="img-bot">
            <i></i>
            <span>{{ item.route }}</span>
          </p>
          <div class="div3">
            <span v-for="item3 in item.inform" :key="item3">{{ item3 }}</span>
          </div>
        </div>
        <div style="height: 13.5px; background: #f7f7f7"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFindroomsData } from "../../utils/app";
import BetterScroll from "better-scroll";
let bs;
export default {
  data() {
    return {
      roomData: [],
      size: 4,
      num: 1,
      page: 1,
      count: null,
    };
  },

  props: {},
  components: {},
  computed: {},
  watch: {
    async num() {
      // 请求数据
      const moreRes = await getFindroomsData({
        page: this.page,
        size: this.size,
      });
      // console.log(moreRes.count);
      this.roomData = this.roomData.concat(moreRes.list);
      // console.log(this.roomData);

      // 数据更新啦
      await this.$nextTick();

      // 重新计算高度
      bs.refresh();

      // 这一次的请求结束啦，可以开始下一次请求
      if (this.roomData.length < this.count) {
        bs.finishPullUp();
      }
    },
  },
  created() {},
  methods: {
    async get(page, size) {
      const res = await getFindroomsData({
        page,
        size,
      });
      this.roomData = res.list;
      this.count = res.count;
      // console.log(res.list);
      // console.log(this.roomData[0]._id);
      // 数据拿到以后并且渲染完之后才能才能加载
      await this.$nextTick(); // 渲染结束 才执行下一步工作
      bs = new BetterScroll(".big_wrap", {
        scrollX: false, // 默认横向滚动
        scrollY: true, // 开启纵向滚动
        click: true,
        pullUpLoad: true,
        //检测拉到底
        probeType: 3,
        mouseWheel: true, //开启鼠标滚轮
      });
      bs.on("pullingUp", () => {
        // console.log("拉到底了");
        this.num++;
        this.page++;
        // console.log(this.page);
      });
      //监听滚动的位置
      bs.on("scroll", (position) => {
        // console.log(position);
        this.$emit("pos", position);
      });
    },
    scrollTo(x, y, time = 300) {
      bs.scrollTo(x, y, time);
    },
  },
  mounted() {
    this.get(this.page, this.size);
  },
};
</script>

<style lang="less">
.chuzu {
  .van-card {
    background: #fff;
    .van-card__header {
      height: 46px;
      .van-card__thumb {
        width: 46px;
        height: 46px;
        img {
          width: 46px;
          height: 46px;
        }
      }
      .van-card__content {
        height: 46px;
        flex-direction: row;
        > div {
          height: 46px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .van-card__bottom {
          height: 46px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .van-card__price {
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #a75769;
          }
          .van-card__num {
            width: 61px;
            height: 20px;
            background: #f4f5f9;
            text-align: center;
            line-height: 20px;
            border-radius: 4px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #bed5db;
          }
        }
      }
    }
  }
  .div1 {
    padding: 0 15px;
    background: #fff;
    font-family: PingFang SC;
    font-weight: 500;
    .div2 {
      color: #b44a5a;
      span {
        font-size: 13px;
        margin-right: 10px;
      }
    }
    > p {
      font-size: 14px;
      line-height: 22px;
      color: #5e5e5e;
    }
    .div-img {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // overflow: auto;
      img {
        width: 110px;
        height: 82px;
        margin-top: 10px;
      }
    }
    .img-bot {
      font-size: 13px;
      color: #b5b4ba;
    }
    .div3 {
      margin-top: 24px;
      font-size: 12px;
      color: #98adb9;
      height: 22px;
      span {
        padding: 6px;
        background: #f4f5f9;
        margin-right: 10px;
        margin-bottom: 11px;
      }
    }
  }
}
.big_wrap {
  position: fixed;
  top: 94px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>
